<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item>
          <el-col :span="6">
            <el-form-item>
              <el-input
                v-model="search.cid"
                size="medium"
                placeholder="输入企业编号查询"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input
                v-model="search.comName"
                size="medium"
                placeholder="输入企业名称查询"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
              <el-input
                v-model="search.paperNo"
                size="medium"
                placeholder="输入证件号码查询"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-select
                v-model="search.paperType"
                filterable
                placeholder="输入证件类型查询"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.paperType"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>

        <div style="margin-left: 900px">
          <el-form-item>
            <el-button
              type="text"
              @click="searchPageList(1)"
              class="el-icon-search"
              >搜索
            </el-button>
          </el-form-item>

          <el-form-item>
            <el-button
              class="el-icon-circle-plus-outline"
              type="text"
              @click="dialogVisible = true"
              >新增
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              class="el-icon-delete"
              type="text"
              @click="handleDelete()"
              >批量删除
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="el-icon-refresh" type="text" @click="refreshData"
              >刷新
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="el-icon-refresh" type="text" @click="reSet"
              >重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <div style="text-align: center; color: #409eff"><h2>信息展示</h2></div>
      <el-divider></el-divider>
      <el-table
        :data="tableData"
        highlight-current-row
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <!-- 多选++++++++++++++++ -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="编号" width="112">
          <template slot-scope="scope">
            <router-link @click.native="lookUp(scope.row)" to="">
              {{ scope.row.cid }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.comName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="证件类型" width="180">
          <template slot-scope="scope">
            <!-- <i class=""></i>
            <span>{{ scope.row.paperType }}</span> -->
            <el-select
              v-model="scope.row.paperType"
              filterable
              :disabled="true"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.paperType"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="证件号码">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.paperNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成立日期">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.setDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="注册资本">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.regCapital }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职工人数">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.workerNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="登记日期">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.regDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新日期">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.updateDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="270">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row, 1)"
              >删除
            </el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-share"
              @click="handleJump()"
            >
              <router-link
                :to="{ name: 'user', params: { cid: scope.row.cid } }"
                >高管</router-link
              >
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="企业信息"
        :append-to-body="true"
        :visible.sync="dialogVisible"
        @close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item>
            <el-col :span="12">
              <el-form-item label="企业编号">
                <el-input
                  placeholder="编号自动生成"
                  :disabled="true"
                  v-model="ruleForm.cid"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="企业名称" prop="comName">
                <el-input
                  v-model="ruleForm.comName"
                  :disabled="dis"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-col :span="12">
              <el-form-item label="证件类型" prop="paperType">
                <el-select
                  v-model="ruleForm.paperType"
                  filterable
                  :disabled="dis"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.paperType"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册资本（万元）" prop="regCapital">
                <el-input
                  v-model="ruleForm.regCapital"
                  :disabled="dis"
                  style="width: 100%"
                  @blur="projectAmounts"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-col :span="12">
              <el-form-item label="证件号码" prop="paperNo">
                <el-input
                  v-model="ruleForm.paperNo"
                  :disabled="dis"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="成立日期">
                <el-date-picker
                  type="date"
                  placeholder="成立日期自动生成"
                  v-model="ruleForm.setDate"
                  style="width: 100%"
                  :disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-col :span="12">
              <el-form-item label="职工人数" prop="workerNum">
                <el-input
                  v-model="ruleForm.workerNum"
                  :disabled="dis"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登记日期" prop="regDate">
                <el-input
                  v-model="ruleForm.regDate"
                  :disabled="true"
                  style="width: 100%"
                  placeholder="登记日期自动生成"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="address">
                <el-input
                  v-model="ruleForm.address"
                  :disabled="dis"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更新日期" prop="updateDate">
                <el-input
                  v-model="ruleForm.updateDate"
                  :disabled="true"
                  style="width: 100%"
                  placeholder="更新日期自动更新"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>
        <span slot="footer" v-show="dis===false">
          <el-button @click="cancel()" size="medium">取 消</el-button>
          <el-button @click="addUser()" type="primary" size="medium"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <br />
      <div class="pages">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
      dis: false,
      ruleForm: {
        cid: "",
        comName: "",
        paperNo: "",
        setDate: "",
        paperType: "",
        regCapital: "",
        address: "",
        workerNum: "",
        regDate: "",
        updateDate: "",
      },
      rules: {
        comName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          // {
          //   min: 1,
          //   max: 50,
          //   message: "长度在 1 到 50 个字符",
          //   trigger: "blur",
          // },
        ],
        paperNo: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
          // { min: 5, message: "长度大于 1 个字符", trigger: "blur" },
        ],
        paperType: [
          { required: true, message: "请选择证件类型", trigger: "blur" },
        ],
        setDate: [
          { required: true, message: "请输入成立日期", trigger: "blur" },
        ],
        regCapital: [
          { required: true, message: "请输入注册资本", trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        workerNum: [
          { required: true, message: "请输入职工人数", trigger: "blur" },
        ],
      },
      tableData: [],
      search: {
        cid: "",
        comName: "",
        paperType: "",
        paperNo: "",
      },

      dialogVisible: false,
      dialogUpdate: false,
      dialogDel: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      disablePage: false,
      delIds: [],
      multipleSelection: [],
    };
  },
  // watch:{
  //   'ruleForm.reg'()
    
  // },
  methods: {
     toThousandsNoZero(num) {    
    return num ? ( (isNaN(parseFloat(num.toString().replace(/,/g, ""))) ? 1 : parseFloat(num.toString().replace(/,/g, "")))).toFixed(2).toString().replace(/(\d)(?=(\d{3})+\.)/g, 
    function ($0, $1) {
        return $1 + ",";
     }) : "";
    },
    projectAmounts(){//this.ruleForm.regCapital 资金
      if(isNaN(parseFloat(this.ruleForm.regCapital))){
      this.ruleForm.regCapital= 0.00;
    }else{
    this.ruleForm.regCapital=this.toThousandsNoZero(this.ruleForm.regCapital);
     }
    },
    handleJump() {},
    getPaperType() {
      this.axios.get(`/paperType/findAll`).then((res) => {
        this.options = res.data;
      });
    },
    searchPageList(pageNum) {
      this.currentPage = pageNum === 1 ? pageNum : this.currentPage;
      this.axios
        .post(
          `/company/searchPageList/${this.currentPage}/${this.pageSize}`,
          this.search
        )
        .then((response) => {
          this.tableData = response.data.pageDate;
          this.total = response.data.totalNum;
        })
        .catch((error) => {
          this.$message.error("查询错误", error);
        });
    },
    reSet() {
      this.search = {};
    },
    lookUp(row) {
      this.dis = true;
      this.dialogVisible = true;
      this.ruleForm = Object.assign({}, row); //这句是关键！！！
    },
    handleClose(key, keyPath) {
      this.dis = false;
      this.ruleForm = {};
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.ruleForm = Object.assign({}, row); //这句是关键！！！
    },
    handleDelete(index, row, flag) {
      this.$confirm("删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (flag == 1) {
            this.delIds.push(row.cid);
          } else {
            if (this.multipleSelection.length !== 0) {
              this.multipleSelection.forEach((item) => {
                this.delIds.push(item.cid);
              });
            } else {
              this.$message({
                message: "请先选择",
                type: "warning",
              });
              //console.log(this.multipleSelection)
              return;
            }
          }
          this.axios({
            method: "post",
            url: "/company/delete",
            data: this.delIds,
          })
            .then((response) => {
              if (response.data.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message.error("删除错误", response.data.message);
              }
              this.multipleSelection = [];
              this.searchPageList();
            })
            .catch((error) => {
              this.$message.error("删除错误", error);
              this.multipleSelection = [];
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.multipleSelection = [];
        });
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.searchPageList();
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.searchPageList();
    },
    cancel() {
      this.dialogUpdate = false;
      this.dialogVisible = false;
      this.ruleForm = {};
    },
    addUser() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.regCapital=this.ruleForm.regCapital.replace(/,/g,'')
          this.axios({
            method: "post",
            url: `/company/${
              this.ruleForm.cid == undefined ||
              this.ruleForm.cid == null ||
              this.ruleForm.cid == ""
                ? "add"
                : "update"
            }`,
            data: this.ruleForm,
          })
            .then((response) => {
              if (response.data.code == 0) {
                this.searchPageList();
                this.dialogVisible = false;
                this.$message({ message: "操作成功", type: "success" });
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("操作错误", error);
            });
        } else {
          this.$message({
            message: "请先完善信息",
            type: "warning",
          });
        }
      });
    },
    refreshData() {
      location.reload();
    },
    // 多选+++++++++++++
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.searchPageList();
    this.getPaperType();
  },
};
</script>
<style scoped>
.search_name {
  width: 200px;
}
.pages {
  margin: 0px;
  padding: 0px;
  text-align: right;
}
.sidebar {
  float: left;
}
.companymessage {
  float: left;
}
.wid {
  float: left;
}
</style>
